<script src="./script.js"></script>
<style src="./style.scss" lang="scss" scoped></style>
<template>
  <div>
    <web-header></web-header>

    <div class="wrap w" v-if="quoteData">
      <div class="bread pl10">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>在线报价</el-breadcrumb-item>
          <el-breadcrumb-item>{{ dto.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="pl10">

        <div class="fitem">
          <label class="label">类别：</label>
          <div class="">
            <el-radio-group v-model="quoteValue.category">
              <el-radio-button :label="item.name" v-for="item in quoteData.cateData.list"></el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="fitem">
          <label class="label">尺寸：</label>
          <div>
            <div v-for="(item,index) in quoteValue.sizeList" style="display: flex;align-items: center;margin-bottom: 5px;">
              <div>
                <el-input v-model="quoteValue.sizeList[index].length" style="width:100px"></el-input>
                *
                <el-input v-model="quoteValue.sizeList[index].width" style="width:100px"></el-input>
              </div>
              <span style="margin-left: 5px;margin-right: 5px;">cm</span>
              <label class="label">数量：</label>
              <el-input-number
                style="width:150px"
                v-model="quoteValue.sizeList[index].quantity"
                :min="1"
                :step="1"
                @change="customQuantity"
                :step-strictly="true" />
              <span style="margin-left: 5px;">{{ quoteData.param.unit }}</span>
              <el-link v-if="index == 0" type="primary" @click="addNullRowToList('this.quoteValue.sizeList')" style="margin-left: 10px">新增尺寸</el-link>
              <el-link v-if="index > 0" type="danger" @click="quoteValue.sizeList.splice(index,1)" style="margin-left: 10px">删除尺寸</el-link>
            </div>
            <div style="margin-top: 10px;">合计50平起95折，100平起9折</div>
          </div>


        </div>


        <div class="fitem">
          <label class="label">工序：</label>
          <div class="" style="margin-right: 10px">
            <div class="process">
              <div class="panel">
                <div class="item">
                  <el-checkbox v-model="checkValue.flagCordWrap" @change="singleCheckExclude('flagCordWrap',['flagGoldSilverWrap','flagSilverMiddleWrap'])" style="margin-right:10px">包绳/塑料边</el-checkbox>
                  <div class="item-size" v-if="checkValue.flagCordWrap">
                    <span>留长</span>
                    <el-input v-model="quoteValue.reserveLength" :min="0" size="mini" type="number" class="input" style="width: 80px" />
                    <span>米</span>
                  </div>
                </div>
                <div class="item">
                  <el-checkbox v-model="checkValue.flagGoldSilverWrap" @change="singleCheckExclude('flagGoldSilverWrap',['flagCordWrap','flagSilverMiddleWrap'])" style="margin-right:10px">包金银边</el-checkbox>
                </div>
                <div class="item">
                  <el-checkbox v-model="checkValue.flagSilverMiddleWrap" @change="singleCheckExclude('flagSilverMiddleWrap',['flagCordWrap','flagGoldSilverWrap'])" style="margin-right:10px">包1.5cm银边(中边)</el-checkbox>
                </div>
                <div class="item">
                  <el-checkbox v-model="checkValue.flagKtSheet" style="margin-right:10px">kt板/背胶板裁型</el-checkbox>
                </div>
              </div>
              <div class="panel">
                <div class="item">
                  <el-checkbox v-model="checkValue.flagPlasticHanging" style="margin-right:10px">塑料挂轴</el-checkbox>
                </div>
                <div class="item">
                  <el-checkbox v-model="checkValue.flagLaminationDoubleSide" @change="singleCheckExclude('flagLaminationDoubleSide',['flagLaminationTwill'])" style="margin-right:10px">双面覆膜</el-checkbox>
                </div>
                <div class="item">
                  <el-checkbox v-model="checkValue.flagLaminationTwill" @change="singleCheckExclude('flagLaminationDoubleSide',['flagLaminationDoubleSide'])" style="margin-right:10px">加斜纹膜</el-checkbox>
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>

      <div class="pl10" style="width:600px;margin-bottom:10px;" v-if="quoteList">
        <el-table
          :data="quoteList"
          border
          fit
        >
          <el-table-column label="数量">
            <template slot-scope="{row}">
              <span>{{ row.quantity }}</span>
            </template>
          </el-table-column>
          <el-table-column label="材料">
            <template slot-scope="{row}">
              <span>{{ row.materialAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="后道工序">
            <template slot-scope="{row}">
              <span>{{ row.processAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="总价">
            <template slot-scope="{row}">
              <span>{{ row.totalAmount }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pl10" style="margin-bottom: 10px;" v-if="quoteList">
        <div style="margin-bottom: 10px;">请上传设计文件，最多10个文件，单文件不超2M</div>
        <el-upload
          action="#"
          :multiple="true"
          :file-list="fileList"
          list-type="text"
          :http-request="handleUpload"
          :auto-upload="true"
          :limit="10"
        >
          <el-button size="small" plain>点击上传</el-button>
        </el-upload>
      </div>

      <div class="pl10" style="margin-bottom: 10px;font-weight: bold" v-if="quoteList">
        <span style="color: #C03639;font-size: 16px;margin-right:20px;">￥{{ postData.amount }}</span>{{ postData.detail }}
      </div>

      <div class="pl10" style="display: flex; align-items: center;margin-bottom: 10px;">
        <el-button type="primary" size="large" plain @click="getQuote">获取报价</el-button>
        <el-button type="primary" size="large" @click="submitOrder" v-if="quoteList">提交订单</el-button>
        <div style="color: red;margin-left: 10px;">*下单人承诺：所提供资料（含知识产权）真实、合法，由此引发的所有问题由下单人负责，此订单等同于<a href="#">《印刷委托书》</a></div>
      </div>
    </div>

  </div>
</template>
